/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Divider, Spin, Row, Col } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ busicont, loading, publicdata }) => ({
  loading: loading.models.busicont || loading.models.publicdata,
  dictCode: publicdata.dictCode,
  supplyInfo: busicont.supplyInfo, // 供应商合同回显数据
}))
@Form.create()
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 字典列表：服务类型、顺延方式、付款方式、收费规则、客户付款周期、资料收取方式、发票交付类型、发票交付方式、发票方式、发票类型、拆分规则、付款日期选择方式、产品类型、附件类型
      dictList: [
        'SER_TYPE',
        'POS_WAY',
        'PAY_WAY',
        'FEE_RULE',
        'CUST_PAY_PERIOD',
        'SEND_MAT_COLT_WAY',
        'INV_DELV_TYPE',
        'INV_DELV_WAY',
        'INV_CATE',
        'INV_TYPE',
        'SPLIT_RULES',
        'SELECTION_TYPE',
        'PD_CATE',
        'AFFIX_TYPE',
        'CONT_SPOT',
      ],
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const { contId } = queryString.parse(location.search);
    const { contHisId } = queryString.parse(location.search);
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictList.map(dict => {
        this.setState({ [dict]: data[dict].sort(sortNumber) });
      });
      this.getList(contId, contHisId);
    });
  }

  // 获取数据
  getList = (contId, contHisId) => {
    if (contId) {
      const { dispatch, dictCode } = this.props;
      dispatch({
        type: 'busicont/getHistorySupplyDetail',
        payload: {
          contId: contHisId,
        },
      }).then(response => {
        const supplyInfo = response.data || {};
        dispatch({
          type: 'busicont/matchDictSupplyName',
          payload: {
            supplyInfo,
            dictCode,
          },
        });
      });
    } else {
      router.push('/salemanage/busicont/index');
    }
  };

  render() {
    const { loading, supplyInfo } = this.props;
    return (
      <Spin tip="Loading..." spinning={loading}>
        <PageHeaderWrapper>
          <Card>
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  供应商合同
                </span>
              }
            >
              <Description term="供应商名称">{supplyInfo.suppName || '--'}</Description>
              <Description term="合同名称">{supplyInfo.contName || '--'}</Description>
              <Description term="签约日期">
                {moment(supplyInfo.signDate).format('YYYY-MM-DD') || '--'}
              </Description>
              <Description term="签署部门">{supplyInfo.signDepName || '--'}</Description>
              <Description term="签署人">{supplyInfo.signName || '--'}</Description>
              <Description term="合同日期">
                {moment(supplyInfo.beginDate).format('YYYY-MM-DD') || '--'} ~{' '}
                {moment(supplyInfo.endDate).format('YYYY-MM-DD') || '--'}
              </Description>
              <Description term="顺延方式">
                {supplyInfo.posWayName} {supplyInfo.posDate ? `${supplyInfo.posDate}月` : ''}
              </Description>
            </DescriptionList>
            {/* 涉及客户 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  关联客户
                </span>
              }
            >
              {(supplyInfo.custList &&
                supplyInfo.custList.length &&
                supplyInfo.custList.map(item => (
                  <Description key={item.custId}>{item.custName}</Description>
                ))) || <Description>暂无数据</Description>}
            </DescriptionList>
            {/* 合同约定 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  合同约定
                </span>
              }
            >
              <Description term="付款方式">
                {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.payWayName) || '--'}
              </Description>
              <Description term="社保收费规则">
                {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.insFeeRuleName) ||
                  '--'}
              </Description>
              <Description term="公积金收费规则">
                {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.accuFeeRuleName) ||
                  '--'}
              </Description>
              <Description term="账单交付日">
                {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.billDelvDay) || '--'}
              </Description>
            </DescriptionList>
            {/* 特殊要求 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  特殊要求
                </span>
              }
            >
              <Description>
                {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.speReq) ||
                  '暂无数据'}
              </Description>
            </DescriptionList>
            {/* 附件 */}
            <Divider />
            <Row
              style={{
                marginBottom: 15,
                fontSize: 16,
                color: 'rgba(0,0,0,.85)',
                fontWeight: 'bold',
              }}
            >
              附件
            </Row>
            <Row style={{ lineHeight: '30px' }}>
              {(supplyInfo.fileList &&
                supplyInfo.fileList.length &&
                supplyInfo.fileList.map(item => (
                  <Col
                    xl={{ span: 8 }}
                    lg={{ span: 8 }}
                    md={{ span: 8 }}
                    sm={24}
                    key={item.contFileId}
                  >
                    <a
                      href={item.fileUrl}
                      download={item.fileName}
                      style={{ textDecoration: 'none' }}
                    >
                      {item.fileName}
                    </a>
                  </Col>
                ))) || <Col>暂无数据</Col>}
            </Row>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => window.history.back()}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}
export default Details;
